<template>
     <!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/HContractTrace">货主合同跟踪管理</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>货主合同列表</el-breadcrumb-item>
  </el-breadcrumb>
</div>
       <el-form :inline="true" :model="from" class="demo-form-inline">
       <el-form-item label="合同标题">
         <el-input v-model="from.contractTitle" placeholder="请输入合同标题" clearable />
       </el-form-item>
       <el-form-item label="货主单位">
         <el-input v-model="from.unit" placeholder="对方单位" clearable />
       </el-form-item>
       <el-form-item label="货主负责人">

        
         <el-input v-model="from.personCharge" placeholder="对方负责人" clearable />
       </el-form-item>
       <el-form-item label="经办人">
         <el-input v-model="from.attn" placeholder="经办人" clearable />
       </el-form-item>
       <el-form-item label="签订日期">
           <el-date-picker
           v-model="from.dateofSigning"
           type="date"
           placeholder="签订日期" value-format="YYYY-MM-DD"
           clearable
         />
       </el-form-item>
      <el-button size="small" type="primary" @click="show" >查询</el-button>
      <el-button size="small" type="primary" @click="Dels()"  >批量删除</el-button>
       <el-button size="small" type="primary" @click="chong()">重置</el-button>
       </el-form>
       <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
             <el-table-column type="selection"  width="55" />
       <el-table-column prop="contractNumber" label="合同编号" width="100" />
       <el-table-column prop="contractTitle" label="合同标题" width="100" />
       <el-table-column prop="unit" label="货主单位" width="100" />
       <el-table-column prop="personCharge" label="货主负责人" width="100" />
       <el-table-column prop="lineName" label="线路" width="100" />
       <el-table-column prop="tonPrice" label="吨运价" width="100" />
       <el-table-column prop="ton" label="包车条件吨位" width="100" />
       <el-table-column prop="charteredBusPrice" label="包车金额" width="100" />
    <el-table-column prop="dateofSigning" label="签订日期" width="100" >
     <template #default="scope">
               {{ scope.row.dateofSigning.substring(0, 10)}}
      </template>
    </el-table-column>
       <el-table-column prop="attn" label="经办人" width="100" />
       <el-table-column prop="createdDate" label="创建时间" width="100" >
         <template #default="scope">
           {{ scope.row.createdDate.substring(0, 10)}}
         </template>
       </el-table-column>
     <el-table-column prop="abnormalalarms" label="异常报警" width="100" />
       <el-table-column prop="shipmentstatus" label="货运状态" width="100" />
       <el-table-column  label="操作" width="250" >
       <template #default="scope">
          <el-button size="small" type="danger" :disabled="scope.row.shipmentstatus == '已完成' || scope.row.shipmentstatus == '运输中'"  @click="Del()" >删除</el-button>
          <el-button size="small" v-if="scope.row.shipmentstatus == '运输中'
          " @click="UpdateStatus(scope.row.contractId,'已完成')" type="primary" >签收</el-button>
          <el-button size="small" v-if="scope.row.shipmentstatus=='未起运'" @click="UpdateStatus(scope.row.contractId,'运输中')"  type="primary" >发货</el-button>
          <el-button size="small" type="primary" @click="UpdateStatus(scope.row.contractId,'已回单')" v-if="scope.row.shipmentstatus=='已完成'" >回单</el-button>
          <el-button size="small" type="primary" v-if="scope.row.shipmentstatus == '运输中'" @click="ToOnlineTracking(scope.row.abnormalalarms,scope.row.lineName)">在线跟踪</el-button>

          <el-button size="small" type="primary"  v-if="scope.row.shipmentstatus=='未起运'"  @click="Editor(scope.row.lineName,scope.row.contractId)">定义线路</el-button>
          <el-button size="small" type="primary" @click="Trace(scope.row.lineName,scope.row.contractId) "  v-if="scope.row.shipmentstatus=='已回单'">跟踪记录</el-button>
       </template>
         </el-table-column>
    </el-table>
     <el-pagination
         v-model:current-page="page.Pageindex"
         v-model:page-size="page.Pagesize"
         :page-sizes="[3, 6, 9, 11]"
          layout="total, sizes, prev, pager, next, jumper"
         :total="page.totalCount"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
   
   </template>
      <script setup lang='ts'>
       import axios  from 'axios';
   import { ElMessage, ElMessageBox } from 'element-plus'
   import type { ComponentSize } from 'element-plus'
       import { ref, reactive, onMounted,watch } from 'vue';
       import { useRoute } from 'vue-router'; 
      const route = useRoute()  
       const dialogVisible = ref(false) 
       const tableData = ref([]);  
       onMounted(() => {
          show()
    })
        //跳转跟踪记录
     
    const Trace=(linenames:any,id:any)=>{
      router.push({
        path: '/TrackRecord',
        query: {
          linenames: linenames,
          id:id
               }
       })
    }
        //查询条件
       const from=reactive({
               contractTitle:'',
               unit:'',
               personCharge:'',
               attn:'',
               dateofSigning:'',
               ccontractStatus:'',
               buttonArray:[]
    })
     const chong=()=>{
     from.contractTitle=''
     from.unit=''
     from.personCharge=''
     from.attn=''
     from.dateofSigning=''
     from.ccontractStatus=''
      }
      //跳转定义线路
      const LineGet:any=ref([])
      const Editor = (linenames:any,id:any) => {
        axios.get("/bread/api/Lines/GetByLine", {
          params: {
        LineName: linenames
      }
        }).then((res) => {
      console.log(res);
      
          LineGet.value = res.data.data
      
     router.push({
        path: '/DefineLine',
        query: {
          startingCounty: LineGet.value[0].startingCounty,
          endCounty: LineGet.value[0].endCounty,
              id:id
        }
       })
     
    }
  )
   }
   const multipleSelection = ref([])
    //多选用于批删
    const handleSelectionChange = (val:any) => {
     multipleSelection.value=(val.map(o=>o.contractId))
   
   }
   //删除
   const Del=()=>{
     console.log(multipleSelection.value)
     ElMessageBox.confirm(
       '您确定要删除吗？',
       'Warning',
       {
         confirmButtonText: '是的',
         cancelButtonText: '取消',
         type: 'warning',
       }
     )
       .then(() => {
         axios.post('/hwrite/api/Contract/DelContract',{
           contractId:multipleSelection.value
         }  )
   .then(res=>{
      if(res.data.data==1){
         ElMessage.success('删除成功')
         show();
      
       }
   })
       })
   }
   //删除
   const Dels=()=>{
     console.log(multipleSelection.value)
     ElMessageBox.confirm(
       '您确定要删除吗？',
       'Warning',
       {
         confirmButtonText: '是的',
         cancelButtonText: '取消',
         type: 'warning',
       }
     )
       .then(() => {
         axios.post('/hwrite/api/Contract/DelContract',
           {
             ContractId:multipleSelection.value
           }
         )
   .then(res=>{
      if(res.data.data==1){
         ElMessage.success('删除成功')
         show();
      
       }
   })
       })
   }
    const page=reactive({
       Pageindex:1,
       Pagesize:15,
       totalCount:0,
       PageCount:0
   
      })
   const show=()=>{
       axios.get('/hread/api/ContractRead/HShowContract',
               {
                   params: {
                       Pageindex:page.Pageindex,
                       Pagesize:page.Pagesize,
                       ContractTitle:from.contractTitle,
                       Unit:from.unit,
                       PersonCharge:from.personCharge,
                       Attn:from.attn,
                       DateofSigning:from.dateofSigning,
                       CcontractStatus:from.ccontractStatus
      }
      }
           )
     
     
           .then(res => {
            console.log(res.data.data.list);
            
        tableData.value = res.data.data.list;
         page.totalCount=res.data.data.totalCount;
            page.PageCount=res.data.data.pageCount;
            
             
           })
     }
    import { useRouter } from 'vue-router';
   const router=useRouter()
   //分页
   const handleSizeChange = (val:any) => {
       page.Pagesize=val;
       show();
     }
     const handleCurrentChange = (val:any) => {
       page.Pageindex=val;
       show();
      } 


      //修改状态--运输中/已完成
      const UpdateStatus=(contractId:any,status:any)=>{
        axios.post('/hwrite/api/Tracking/AddContract',{
          contractId:contractId,
          shipmentstatus:status
        })
        .then(res=>{
          if(res.data.code>0){
            ElMessage.success('修改成功')
            show();
          } else {
            ElMessage.error("修改失败!");
            return 
          }
        })
      }


      //在线跟踪(正常)
      const ToOnlineTracking = (abnormalalarms:any,linenames: any) => {
        axios.get("/bread/api/Lines/GetByLine", {
          params: {
            LineName: linenames
          }
        }).then((res) => {
          LineGet.value = res.data.data
          console.log(LineGet.value);
          if(abnormalalarms=="正常"){
            router.push({
              path: '/OnlineTracking',
              query: {
                startingCounty: LineGet.value[0].startingCounty,
                endCounty: LineGet.value[0].endCounty,
                abnormalalarms:abnormalalarms
              }
            })
          }
          else{
            router.push({
              path: '/OnlineTrackAnomalies',
              query: {
                startingCounty: LineGet.value[0].startingCounty,
                endCounty: LineGet.value[0].endCounty,
                abnormalalarms:abnormalalarms
              }
            })
          }

        })
      } 
  

    </script>
       
   <style>
       
   </style>